10.02.2019, 06:23
|
|
Аспирант
|
|
Регистрация: 12.08.2018
Сообщений: 54
|
|
|
Перевести запрос в асинхронный и вернуть массив
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Web Audio Player Demo | Easy-Code.ru</title>
<link rel="stylesheet" href="css/normalize.css"/>
<link type="text/css" href="css/style.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Cormorant+Infant" rel="stylesheet"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css"/>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<style type="text/css">
#datepicker, #datepicker1{
}
#bl1 div{
float: left;
margin-left: 5%;
}
#bl1{
border: 0px solid red;
width: 80%;
height: 40%;
position: absolute;
right: 0px;
}
#test{
margin-top: 19%;
}
</style>
</head>
<body>
<div style="width: 100%; text-align: center; font-family: 'Cormorant Infant', serif;"><h1>Курсы доллара за период <span class="txt">10.07.2018</span> - <span class="txt1">23.07.2018</span> (НБУ)</h1></div>
<div id="bl1">
<div>
<p><input type="text" id="datepicker"/></p>
</div>
<div>
<p><input type="text" id="datepicker1"/></p>
</div>
<div><button id="test">Расчитать</div>
</div>
<div id="myChart" style="margin-top: 118px; width: 50%; height: 50%;"></div>
<script type="text/javascript">
$(function(){
$( "#datepicker" ).datepicker({
altFormat: "mm.yy.dd",
dateFormat: "yy.mm.dd",
monthNames: ['Январь','Февраль','Март','Апрель','Май','Июнь','Июль','Август','Сентябрь','Октябрь','Ноябрь','Декабрь'],
dayNamesMin: [ "Пн", "Вт", "Ср", "Чт", "Пт", "Сб", "Вс" ],
onSelect: function(dateText, inst) {
$(".txt").text(dateText);}
});
$( "#datepicker1" ).datepicker({
altFormat: "mm.yy.dd",
dateFormat: "yy.mm.dd",
monthNames: ['Январь','Февраль','Март','Апрель','Май','Июнь','Июль','Август','Сентябрь','Октябрь','Ноябрь','Декабрь'],
dayNamesMin: [ "Пн", "Вт", "Ср", "Чт", "Пт", "Сб", "Вс" ],
onSelect: function(dateText, inst) {
$(".txt1").text(dateText);}
})
console.log($( "#datepicker" )[0].value )
$('#test').click(function(){
var yeaR = $( "#datepicker" )[0].value[0] + $( "#datepicker" )[0].value[1] + $( "#datepicker" )[0].value[2] + $( "#datepicker" )[0].value[3],
MonS = $( "#datepicker" )[0].value[5] + $( "#datepicker" )[0].value[6],
DaY = $( "#datepicker" )[0].value[8] + $( "#datepicker" )[0].value[9];
var yeaR_fin = $( "#datepicker1" )[0].value[0] + $( "#datepicker1" )[0].value[1] + $( "#datepicker1" )[0].value[2] + $( "#datepicker1" )[0].value[3],
MonS_fin = $( "#datepicker1" )[0].value[5] + $( "#datepicker1" )[0].value[6],
daY_fin = $( "#datepicker1" )[0].value[8] + $( "#datepicker1" )[0].value[9];
function plusD(){
var data_plus = new Date(1000 * 60 * 60 * 24),
us_Mill = data_plus.getTime();
return us_Mill;
}
function finish(){
var data_plus = new Date(yeaR_fin, MonS_fin - 1, daY_fin),
us_Mill = data_plus.getTime();
return us_Mill;
}
function start(){
var data_plus = new Date(yeaR, MonS - 1, DaY),
us_Mill = data_plus.getTime();
return us_Mill;
}
var sTarrT = start();
var fin = finish();
var plus = plusD();
function diff(){
var rest = fin - sTarrT
return Math.floor(rest / (1000 * 60 * 60 * 24));
}
var difF = diff();
function proth(){
var mas = [];
for(var i = 0; i <= difF; i++){
var dataChikl = new Date(sTarrT),
ChiklY = dataChikl.getFullYear(),
ChiklM = dataChikl.getMonth()+1,
ChiklD = dataChikl.getDate();
if(ChiklM < 10 && ChiklD < 10){
ChiklD = '0'+ ChiklD;
ChiklM = '0'+ ChiklM;
}
else if(ChiklM < 10){
ChiklM = '0'+ ChiklM;
}
else if(ChiklD < 10){
ChiklD = '0'+ ChiklD;
}
var y;
$.ajax({
async:false,
url : `https://bank.gov.ua/NBUStatService/v1/statdirectory/exchange?date=${ChiklY}${ChiklM}${ChiklD}&json`,
success : function(data){
y = data[27].rate;
}})
mas.push(y);
sTarrT = sTarrT + plus;
}
return mas;
}
Highcharts.chart('myChart', {
subtitle: {
text: 'Cтатистика курса'
},
xAxis: {
categories: [ 'Январь','Февраль','Март','Апрель','Май','Июнь','Июль','Август','Сентябрь','Ноябрь','Декабрь']
},
yAxis: {
title: {
text: 'Курс гривна/доллар'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
series: [{
name: '1$',
data: proth()
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
});
})
})
</script>
</body>
</html>
Доброго времени суток нужно ускорить аякс запрос. Знаю что нужно сделать запрос асинхронным, но вопрос в том что как мне при асинхронном запросе вернуть из функции "proth" вернуть "mas" Дело в том что если я делаю запрос асинхронным то в mas возвращает "undefined" Знаю что-то про колбеки через таймеры и промисы но для меня это дримучий лес помогите! За ранее спасибо :) :help:
|
|
10.02.2019, 08:07
|
 |
Профессор
|
|
Регистрация: 20.12.2009
Сообщений: 1,714
|
|
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Web Audio Player Demo | Easy-Code.ru</title>
<link rel="stylesheet" href="css/normalize.css" />
<link type="text/css" href="css/style.css" rel="stylesheet" />
<link href="https://fonts.googleapis.com/css?family=Cormorant+Infant" rel="stylesheet" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.3/Chart.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<style>
#datepicker,
#datepicker1 {}
#bl1 div {
float: left;
margin-left: 5%;
}
#bl1 {
border: 0px solid red;
width: 80%;
height: 40%;
position: absolute;
right: 0px;
}
#test {
margin-top: 19%;
}
</style>
</head>
<body>
<div style="width: 100%; text-align: center; font-family: 'Cormorant Infant', serif;">
<h1>Курсы доллара за период <span class="txt">10.07.2018</span> - <span class="txt1">23.07.2018</span> (НБУ)</h1>
</div>
<div id="bl1">
<div>
<p><input type="text" id="datepicker" /></p>
</div>
<div>
<p><input type="text" id="datepicker1" /></p>
</div>
<div><button id="test">Расчитать</button></div>
</div>
<div id="myChart" style="margin-top: 118px; width: 50%; height: 50%;"></div>
<script>
Highcharts.setOptions({
lang: {
months: [
'Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь',
'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'
],
shortMonths: [
"янв", "фев", "март", "апр", "май", "июнь",
"июль", "авг", "сент", "окт", "ноя", "дек"
]
}
});
$(function() {
$("#datepicker").datepicker({
altFormat: "dd.mm.yy",
dateFormat: "dd.mm.yy",
monthNames: ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'],
dayNamesMin: ["Пн", "Вт", "Ср", "Чт", "Пт", "Сб", "Вс"],
onSelect: function(dateText, inst) {
$(".txt").text(dateText);
}
});
$("#datepicker1").datepicker({
altFormat: "dd.mm.yy",
dateFormat: "dd.mm.yy",
monthNames: ['Январь', 'Февраль', 'Март', 'Апрель', 'Май', 'Июнь', 'Июль', 'Август', 'Сентябрь', 'Октябрь', 'Ноябрь', 'Декабрь'],
dayNamesMin: ["Пн", "Вт", "Ср", "Чт", "Пт", "Сб", "Вс"],
onSelect: function(dateText, inst) {
$(".txt1").text(dateText);
}
});
$('#test').click(async function() {
var dp = $("#datepicker").val();
var [DaY, MonS, yeaR] = dp.split(".");
var dp1 = $("#datepicker1").val();
var [daY_fin, MonS_fin, yeaR_fin] = dp1.split(".");
function plusD() {
return 1000 * 60 * 60 * 24;
}
function finish() {
var data_plus = new Date(yeaR_fin, MonS_fin - 1, daY_fin);
return data_plus.getTime();
}
function start() {
var data_plus = new Date(yeaR, MonS - 1, DaY);
return data_plus.getTime();
}
var sTarrT = start();
var fin = finish();
var plus = plusD();
function diff() {
var rest = fin - sTarrT
return Math.floor(rest / (1000 * 60 * 60 * 24));
}
var difF = diff();
async function proth() {
var mas = [];
for (var i = 0; i <= difF; i++) {
var dataChikl = new Date(sTarrT),
ChiklY = dataChikl.getFullYear(),
ChiklM = dataChikl.getMonth() + 1,
ChiklD = dataChikl.getDate();
if (ChiklM < 10 && ChiklD < 10) {
ChiklD = '0' + ChiklD;
ChiklM = '0' + ChiklM;
} else if (ChiklM < 10) {
ChiklM = '0' + ChiklM;
} else if (ChiklD < 10) {
ChiklD = '0' + ChiklD;
}
var data = await $.ajax({
url: `https://bank.gov.ua/NBUStatService/v1/statdirectory/exchange?date=${ChiklY}${ChiklM}${ChiklD}&json`
});
var y = "27" in data ? data[27].rate : NaN;
mas.push([sTarrT, y]);
sTarrT += plus;
}
return mas;
}
$("#myChart").html(`<div class="loading">Загрузка…</div>`);
Highcharts.chart('myChart', {
subtitle: {
text: 'Cтатистика курса'
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats: {
month: '%e %b',
year: '%b'
}
},
yAxis: {
title: {
text: 'Курс гривна/доллар'
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle'
},
series: [{
name: '1$',
data: await proth()
}],
responsive: {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom'
}
}
}]
}
});
})
})
</script>
</body>
</html>
Последний раз редактировалось Malleys, 10.02.2019 в 08:59.
|
|
11.02.2019, 13:57
|
|
Аспирант
|
|
Регистрация: 12.08.2018
Сообщений: 54
|
|
|
Очень круто! Спасибо! Если бы вы еще немного объяснили или хотябы статью указали по этой теме было бы вообще шикарно!))
|
|
11.02.2019, 21:38
|
|
Профессор
|
|
Регистрация: 20.12.2009
Сообщений: 1,714
|
|
|
Сообщение от oleg901
|
|
статью указали по этой теме было бы вообще шикарно!
|
Вот, например, статья об асинхронной функции https://habr.com/ru/company/ruvds/blog/414373/
И вы можете в поисковой системе спрашивать всё, что хотите на эту тему, справочники, книги, видео, блоги, и пр. почти бесконечное объяснение, что же такое асинхронная функция. Попробуйте исследовать. https://www.google.us/search?q=async+await+javascript |
|
|
|
